<!-- 搜索表单 -->
<form nz-form [formGroup]="searchForm" class="ant-advanced-search-form">
  <!-- [nzGutter]="24" -->
  <div nz-row>
    <div nz-col [nzSpan]="6" *ngFor="let control of controlArray" [style.display]="control.show?'block':'none'">
      <nz-form-item nzFlex>
        <nz-form-label [nzSpan]="6" [attr.for]="control.name">{{ control.name }}</nz-form-label>
        <nz-form-control [nzSpan]="15" [ngSwitch]="control.type">

          <input nz-input *ngSwitchCase="'input'" [placeholder]="control.placeholder" [formControlName]="control.controlname" [attr.id]="control.name">
          
          <nz-select *ngSwitchCase="'select'" nzAllowClear>
            <nz-option nzValue="Option 1" nzLabel="Option 1"></nz-option>
            <nz-option nzValue="Option 2" nzLabel="Option 2"></nz-option>
          </nz-select>
          
          <div *ngSwitchCase="'date'" (click)="show_ca($event, control)">
            <!-- 暂无datepicker组件,引入外部插件不大好,只能先用日历凑活下,等下个月版本更新应该会出datepick -->
            <nz-input-group nzSuffixIcon="anticon anticon-calendar">
              <input 
                nz-input 
                [placeholder]="control.placeholder" 
                [ngModel]="searchForm.get(control.controlname).value | date: 'yyyy/MM/dd'" 
                [ngStyle]="{ cursor: 'pointer' }" 
                [attr.id]="control.name"
                [ngModelOptions]="{ standalone: true }">
            </nz-input-group>
            <div
              [style.display]="control.show_ca?'block':'none'" 
              [ngStyle]="{ width: '215px', border: '1px solid #d9d9d9', borderRadius: '4px', position: 'absolute', zIndex: '2', backgroundColor: '#fff' }">
              <nz-calendar 
                nzCard
                [formControlName]="control.controlname"
                ></nz-calendar>
            </div>
          </div>

        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row nzType="flex" nzJustify="space-between">
    <div nz-col>
      <button nz-button [nzType]="'primary'" (click)="editUserInfo(true)">新建</button>
      <button nz-button [nzType]="'primary'">导出报表</button>
    </div>
    <div nz-col>
      <button nz-button [nzType]="'primary'">搜索</button>
      <button nz-button (click)="resetForm()">重置</button>
      <a style="margin-left:8px;font-size:12px;" (click)="toggleCollapse()">
        展开
        <i class="anticon" [class.anticon-down]="isCollapse" [class.anticon-up]="!isCollapse"></i>
      </a>
    </div>
  </div>
</form>
<!-- 搜索结果 -->
<div class="ant-search-table">
  <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="15" [nzScroll]="{x:'2000px'}">
    <thead>
      <tr>
        <th nzShowSort nzWidth="120px" nzLeft="0px">ID</th>
        <th nzShowSort nzWidth="120px" nzLeft="120px">帐号</th>
        <th nzShowSort>姓名</th>
        <th nzShowSort>手机号</th>
        <th nzShowSort>身份证号</th>
        <th nzShowSort *ngIf="menuItem !== 'customer'">分成比例(%)</th>
        <th nzShowSort>账户状态</th>
        <th nzShowSort>出入金状态</th>
        <th nzShowSort>余额</th>
        <th>可出资金</th>
        <th nzShowSort>销售</th>
        <th nzShowSort>会员</th>
        <th nzShowSort>运营商</th>
        <th nzShowSort>注册时间</th>
        <th nzWidth="150px" nzRight="0px">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of nzTable.data">
        <td nzLeft="0px">{{data.name}}</td>
        <td nzLeft="120px">{{data.age}}</td>
        <td>{{data.address}}</td>
        <td>{{data.address}}</td>
        <td>{{data.address}}</td>
        <td nzShowSort *ngIf="menuItem !== 'customer'">100</td>
        <td>{{data.address}}</td>
        <td>{{data.address}}</td>
        <td>{{data.address}}</td>
        <td>{{data.address}}</td>
        <td>{{data.address}}</td>
        <td>{{data.address}}</td>
        <td>{{data.address}}</td>
        <td>{{data.address}}</td>
        <td nzRight="0px">
          <a (click)="editUserInfo(false)">编辑</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="changeBelong()">更改上级</a>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>